<template>
  <div class="tips-guide">
    <el-card shadow="hover" class="guide-card">
      <div slot="header" class="card-header">
        <h3><i class="el-icon-warning"></i> 旅行贴士</h3>
      </div>
      <div class="card-content">
        <ul class="tips-list">
          <li v-for="tip in travelTips" :key="tip.id">
            <i class="el-icon-info"></i> {{tip.description}}
          </li>
        </ul>
      </div>
    </el-card>
    <el-card shadow="hover" class="guide-card">
      <div slot="header" class="card-header">
        <h3><i class="el-icon-phone"></i> 紧急联系</h3>
      </div>
      <div class="card-content">
        <el-table :data="emergencyContacts" border stripe>
          <el-table-column prop="name" label="名称" width="180"></el-table-column>
          <el-table-column prop="phone" label="电话" width="180"></el-table-column>
          <el-table-column prop="description" label="说明"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TipsGuide',
  data() {
    return {
      emergencyContacts: [],
	  travelTips: []
    }
  },mounted() {
    this.$http.get("userApi/guideCtl/getEmergnecy").then((resp) => {
    	if (resp.data.code == 200) {
    		this.emergencyContacts = resp.data.data;
    	}
    })
	this.$http.get("userApi/guideCtl/getTips").then((resp) => {
		if (resp.data.code == 200) {
			this.travelTips = resp.data.data;
		}
	})
  },
}
</script>

<style scoped>
.guide-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}
.guide-card:hover {
  transform: translateY(-5px);
}
.card-header {
  display: flex;
  align-items: center;
}
.card-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
}
.card-header i {
  margin-right: 10px;
}
.tips-list {
  padding-left: 20px;
}
.tips-list li {
  margin-bottom: 12px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
}
.tips-list i {
  margin-right: 8px;
  color: #1890ff;
  margin-top: 4px;
}
.el-table {
  width: 100%;
}
</style>